<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>引出生命周期概念</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="app">
    <h1 :style="{opacity}">Vue的生命周期</h1>
    <h2 v-if="show">在初始话真实dom时是否被展示</h2>

    <!--解决方案1:这样改变的用户的需求   <button @click="check">点我</button>-->
    <!--解决方案2:这样会造成死循环的 <h2>{{check()}}</h2>-->
</div>
</body>
<!--
    生命周期:
        1.又名:生命周期回调函数、生命周期函数、生命周期钩子,
        2.是什么:Vue在关键时刻帮我们调用的一些特殊名称的函数。
        3.生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的。比如下面的实现文字透明度循环变化的效果。
        4.生命周期函数中的this指向是vm或组件实例对象。
-->
<script>
    let vue = new Vue({
        el: '#app',
        data: {
            opacity: 1,
            show:false
        },
        methods: {
            //配合上面的两个解决方案去看
            // check(){
            //     console.log("定时器被调用了");
            //     setInterval(()=>{
            //         vue.opacity-=0.01;
            //         if(vue.opacity <=0){
            //             vue.opacity = 1;
            //         }
            //     },16)
            // }
        },
        mounted() {
            console.log("mounted")
            setInterval(() => {
                this.opacity -= 0.01;
                if (this.opacity <= 0) {
                    this.opacity = 1;
                }
            }, 16)
        }

    });
    /*这个是实现了功能,但是此代码没被Vue所管理*/
    // setInterval(()=>{
    //     vue.opacity-=0.01;
    //     if(vue.opacity <=0){
    //         vue.opacity = 1;
    //     }
    // },16)
</script>
</html>